<template>
	<van-tabs
		v-model="activeName"
		v-show="visible"
		:name="name"
		:class="curClassName"
		:style="curStyle"
		@click-tab="handleClick"
	>
		<template v-if="containerModel.length > 0">
			<van-tab
				v-for="name of containerModel"
				:title="getTabPaneCaption(name)"
				:class="getTabPaneClass(name)"
                :style="getTabPaneStyle(name)"
				:name="name"
				:key="name"
			>
				<slot :name="name"></slot>
			</van-tab>
		</template>
	</van-tabs>
</template>
<script setup lang="ts">
import { TabPanelProps } from './tab-panel';
const props = defineProps(TabPanelProps);

/**
 * 项名称
 *
 * @memberof AppTabPanel
 */
const itemName = computed(() => {
	return props.index || props.index === 0
		? `${props.name}_${props.index}`
		: props.name;
});

/**
 * 当前容器样式
 *
 * @memberof AppTabPanel
 */
const curStyle = computed(() => {
	const layoutModel = props.layoutModelDetails[itemName.value];
	if (layoutModel) {
		return layoutModel.getElementStyle();
	}
});

/**
 * 类名
 *
 * @memberof AppTabPanel
 */
const curClassName = computed(() => {
	const layoutModel = props.layoutModelDetails[itemName.value];
	const classNames = {
		'app-tab-panel': true
	};
	if (layoutModel) {
		Object.assign(classNames, layoutModel.getClassNames());
	}
	return classNames;
});

/**
 * 是否显示
 *
 * @memberof AppTabPanel
 */
const visible = computed(() => {
	const layoutModel = props.layoutModelDetails[itemName.value];
	if (layoutModel && !layoutModel.visible) {
		return false;
	}
	return true;
})

/**
 * 当前激活项
 *
 * @memberof AppTabPanel
 */
const activeName = ref('');

/**
 * 插槽对象
 *
 * @memberof AppTabPanel
 */
const containerModel = computed(() => {
	let containerModel: any[] = [];
	const curLayoutModel = props.layoutModelDetails[itemName.value];
	if (
		curLayoutModel &&
		curLayoutModel.details &&
		curLayoutModel.details.length > 0
	) {
		curLayoutModel.details.forEach((key: string) => {
			containerModel.push(key);
		});
	}
	return containerModel;
});

/**
 * 处理分页点击
 *
 * @memberof AppTabPanel
 */
const handleClick = (activeKey: any) => {
	if (props.layoutModelDetails[itemName.value]) {
		props.layoutModelDetails[itemName.value].clickPage(activeKey.name);
	}
};

watch(containerModel.value, (newVal) => {
	activeName.value = newVal && newVal.length > 0 ? newVal[0] : '';
	props.layoutModelDetails[itemName.value].clickPage(activeName.value);
});

/**
 * 获取当前分页caption
 *
 * @memberof AppTabPanel
 */
const getTabPaneCaption = (key: string) => {
	const curLayoutModel = props.layoutModelDetails[itemName.value];
	if (
		curLayoutModel &&
		curLayoutModel.tabPages &&
		curLayoutModel.tabPages.length > 0
	) {
		const curTabPage = curLayoutModel.tabPages.find(
			(tabPage: any) => tabPage.name === key
		);
		if (curTabPage) {
			return curTabPage.caption;
		}
	}
	return key;
};

/**
 * 获取当前分页class
 *
 * @memberof AppTabPanel
 */
const getTabPaneClass = computed(() => {
    const getClassNames = (key: string) => {
        const curTabPage = props.layoutModelDetails[key];
        if (curTabPage) {
            const classNames = curTabPage.getLabelDynaClass();
            return Object.assign(classNames, curTabPage.getClassNames())
        }
    }
    return getClassNames;
}) 

/**
 * 获取当前分页Style
 *
 * @memberof AppTabPanel
 */
const getTabPaneStyle = computed(() => {
    const getStyle = (key: string) => {
        const curTabPage = props.layoutModelDetails[key];
        if (curTabPage) {
            return curTabPage.getLabelStyle();
        }
    }
    return getStyle;
}) 
</script>
